<template>
    <div class="login">
        <header class="login_header">
           <img  class="login_header_img" src="@/assets/images/logo.png">
            <span class="login_header_title">同策网工作台</span>
        </header>
        
        <div class="login_warp">
            <div class="login_from">
                <h3 class="login_from_title">{{timeType}}，欢迎回来~</h3>
                <div >
                    <span class="login_from_phones">
                       <!-- <input type="number" @blur="getRolrList" autocomplete="off" @input="inputPhoneChange" v-model="formInline.phone" class="login_from_inputPhones" placeholder="请输入手机号码"></input> -->
                       <AutoComplete v-model="formInline.phone" :data="data1" @on-blur="inputBlur" @on-search="handleSearch"  @on-change="inputPhoneChange"  placeholder="请输入手机号码" class="login_from_inputPhones" style="width:310px"></AutoComplete>
                       
                       <span class="login_from_drop" v-if="roleShow" @mouseover="isCustom = true" @mouseleave="isCustom = false">
                         <Dropdown trigger="custom" :visible="isCustom" class="login_from_Menu" @on-click="menuSelected" placement="bottom-end">
                            <span href="javascript:void(0)" class="login_from_dropMess">
                                {{currentRoleName}}
                                <Icon v-if="this.menuList.length>1" color="#C7C7CC" type="md-arrow-dropdown"></Icon>
                            </span>
                            <DropdownMenu  slot="list" class="login_from_dropdownMenu">
                                <DropdownItem v-for="item in menuList" :selected = 'item.selected' :name="item.roleId" :key="item.roleId">
                                 <span v-if="ifOneCompany">{{item.appName}}</span> 
                                 <Icon v-if="ifOneCompany" type="ios-arrow-forward" size="16" />
                                 <span>{{item.roleName}}</span>
                                </DropdownItem>
                            </DropdownMenu>
                         </Dropdown> 
                       </span>
                    </span>
                    <span class="login_from_code">
                         <input type="text" v-model="formInline.code" @input="formInline.code = formInline.code.slice(0,6)" class="login_from_inputCode" placeholder="请输入验证码"></input>
                         <span v-if="codeTime == 0" @click="getCode" :class="['login_from_code_span', !ifNumberShow && flagShow?'disabled':'']">{{codeMess}}</span>
                         <span v-else class="login_from_code_span disabled">{{codeTime}}s后重新获取</span>
                    </span>
                    <span class="login_from_loginButton" @click="handleSubmit">
                       <span v-if="loginIng">
                          <span>登录</span>
                          <Icon color="white" size="20" type="md-arrow-dropright" />
                       </span>
                      <span v-else>
                           <Spin>
                              <Icon type="ios-loading" color="white" size=25 class="demo-spin-icon-load"></Icon>
                              <div class="demo-spin-icon-loadingMess">加载中...</div>
                           </Spin> 
                      </span>
                    </span>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer">
                <p style="color: #333;">Copyright © 2020 www.tospur.com 版权所有</p>
            </div>
        </footer>
    </div>
</template>
<script>
    import axios from 'axios';
    import {goLogin, getRoleList, getMessageCode} from '@/api/login'
   import rouetrAdd from "@/router/pageOptions";
    import { DropdownItem } from 'view-design';
    import {beginAddRouter} from "@/router/routerSlider"
    export default {
        components:{DropdownItem},
        data() {
            return {
                imgList: [],
                titleName:'同策后管系统',
                roleShow: false,
                timeType:"上午好",
                isCode: false,
                menuList:[],
                isCustom:false,
                codeMess:'点击获取',
                codeTime:0,
                formInline: {
                    phone: '',
                    code: '',
                    roleId: ''
                },
                apiPath: '',
                uuid: '',
                currentRoleName:"角色",
                data1:[],
                phoneOldList:[],
                loginIng:true,
                flagShow:true

            }
        },
        beforeRouteLeave(to,from,next){
           this.loginIng = true;
           next();
        },
        computed:{
          ifNumberShow(){
            let {phone,roleId} = this.formInline,r = /^1[3456789]\d{9}$/;
            if(phone && phone.length == 11 && r.test(phone) && roleId)return true;
            return false;
          }
        },
        methods: {
           //判断当前时间是早上 中午  下午  晚上好
           checkTimeType(){
             let now = new Date(),hour = now.getHours(); 
              if (hour < 9){this.timeType = "早上好"} 
              else if (hour < 12){this.timeType ="上午好"} 
              else if (hour < 14){this.timeType ="中午好"} 
              else if (hour < 17){this.timeType ="下午好"} 
              else {this.timeType ="晚上好"} 
           },
           //监测Input值的变化
           inputPhoneChange(val){
             let phone = this.formInline.phone, length = phone.length,r = /^1[3456789]\d{9}$/;
             if(length == 11 && r.test(phone)){
               this.getRolrList()
             }else{
                this.menuList = [];
                this.roleShow = false;
             }
             if(length != 11 ||  !r.test(phone))return;
           },
           handleSearch(value){
             this.data1 = this.phoneOldList.filter(item=>item.indexOf(value)>-1)
           },
           inputBlur(){
             console.log(1111)
             this.$nextTick(_=>{
               let phone = this.formInline.phone, length = phone.length,r = /^1[3456789]\d{9}$/;
              if(!phone)return;
              console.log(2222,phone,length)
              if(length != 11 ||  !r.test(phone))return this.$Message.error("手机号码有误 请核对")
              //this.menuList.length<1 &&  this.getRolrList();
             })
           },
           //获取角色列表
           getRolrList(){
             this.$tool.setStorage({appId:36});
              let phone = this.formInline.phone;
              if(phone.length != 11 || !(/^1[3456789]\d{9}$/.test(phone)))return;
              getRoleList({phone}).then(item=>{
                console.log("角色列表",item);
                let res = item.list.filter(r=>r.loginWeb == 1);
                console.log("获取列表·············",res);
                if(res.length>0){
                  this.menuList = res || [];
                  this.roleShow = true;
                  let leng = res.findIndex(re => re.appId !== res[0].appId);
                  this.ifOneCompany = leng>-1?true:false
                  res.length == 1 && (this.currentRoleName = res[0].roleName) && (this.formInline.roleId = res[0].roleId)&& this.$tool.setStorage({appId:36}) && (res[0].selected = true)
                  this.$nextTick(_=>{
                     res.length > 1 && (this.isCustom = true)
                  })
                }
              }).catch(err=>this.$Message.error(err))
           },
           //登录
           beginLogin(){
             this.formInline.roleId = this.formInline.roleId-0;
             let phone = this.formInline.phone,appId = 36;
             this.formInline.appId = appId;
             this.loginIng = false;
             this.$tool.setStorage({appId});
             goLogin(this.formInline).then(res=>{
                   //找到当前角色 
                   let currentRole = res.roleList.filter(item=>item.roleId == this.formInline.roleId)[0];
                   res.currentRole = currentRole;
                   res.currentMess = this.menuList.filter(item=>item.roleId == this.formInline.roleId)[0];
                   console.log(res)
                    //将当前的手机号存入缓存
                  if((this.phoneOldList.length>0 && this.phoneOldList.indexOf(phone)<0) || this.phoneOldList.length<1)this.phoneOldList.push(phone);
                   this.$tool.setStorage({
                       'X-Token':res.token,
                       'userMess':JSON.stringify(res),
                       'phoneOldList':JSON.stringify(this.phoneOldList),
                       appId
                   })
                   beginAddRouter();
               }).catch(err=>{
                 this.$Message.error(err);
                  this.$tool.clearStorage(['appId'])
                 this.loginIng = true;
               })
           },
           //角色菜单选中
           menuSelected(mess){
             this.formInline.roleId = mess;
             this.menuList.forEach(item=>{
               item.selected = item.roleId == mess;
               item.roleId == mess && (this.currentRoleName =item.roleName)&&this.$tool.setStorage({appId:36})
             })
             let arrayList =  this.$tool.deepClone(this.menuList);
             this.menuList = [];
             this.menuList = arrayList;
             this.isCustom = false;
             console.log(this.menuList)
           },
           //获取验证码
           getCode(){
             if(!this.ifNumberShow)return;
             this.flagShow = false;
             getMessageCode({phone:this.formInline.phone}).then(res=>{
                 console.log(res);
                 this.countdownTime();
             }).catch(err=>{
                 this.$Message.error(err);
                 this.codeTime = 0;
                 this.codeMess = '点击获取';
                 this.flagShow = true;
             }) 
           },
           //倒计时60s
           countdownTime(){
              this.codeTime = 60;
              this.timeout = setInterval(() => {
                  this.codeTime = this.codeTime-1;
                  if(this.codeTime == 0){
                     this.codeMess = '再次获取';
                     this.flagShow = true; 
                     clearInterval(this.timeout)
                  }
              }, 1000);
           },
           handleSubmit(name){
               let {phone, code, roleId} = this.formInline;
              if(phone.length != 11 || !(/^1[3456789]\d{9}$/.test(phone)))return this.$Message.error("请填写正确的手机号");
              if(!code || code.length != 6)return this.$Message.error("请填写验证码");
               if(!this.roleShow)return this.$Message.error("请核对当前手机号是否正确");
              if(!roleId)return this.$Message.error("请选择角色");
              this.beginLogin()
           }
        },
        created() {
            this.checkTimeType();
            this.listStorage = this.$tool.getStorage("phoneOldList");
            this.phoneOldList = this.listStorage?JSON.parse(this.listStorage):[];
            document.onkeydown = (e)=> {
              if(e.keyCode == 13){
                 let {phone, code, roleId} = this.formInline;
                 if((/^1[3456789]\d{9}$/.test(phone)) && code.length == 6 && roleId)this.handleSubmit();
              }
            }
        },
        mounted() {
            
        },
        beforeDestroy() {
          document.onkeydown = ''
        },
    }
</script>
<style lang="scss" scoped>
  .login {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: url('../../assets/images/bg_login.png') no-repeat;
     background-size: cover;
     background-position: center;
    .login_header{
      position: absolute;
      width: 100%;
      overflow: hidden;
      top: 3vh;
      padding-left: 100px;
      &_img{
          height: 32px;
          width: 31px;
          display: inline-block;
          margin-right: 10px;
      }
      &_title{
        vertical-align: top;
        display: inline-block;
        line-height: 32px;
        height: 32px;  
        font-size: 18px;
        font-weight: 700;
      }
    }
    .login_warp{
      position: absolute;
      top: 20vh;
      width: 100%;
      text-align: center;
      min-width: 990px;
    }
    footer{
      position: absolute;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.6);
      border-radius: 15px;
      padding: 0 20px;
      height: 30px;
      line-height: 30px;   
    }
    &_from{
       &_title{
          font-size: 40px;  
          font-weight: 700;
          margin-bottom: 60px;
       } 
      &_phones{
        width: 470px;
        height: 80px;
        box-shadow: 0px 0px 20px 0px rgba(202, 205, 208, 0.1);
        display: inline-block;
        background-color: white;
        line-height: 80px;
        margin-right: 2px;
        text-align: left;
      }
      &_inputPhones{
        border: none;
        height: 80px;
        //padding-left: 20px;
        //padding: 20px 0 20px 20px;
        margin: 0;
        // float: left;
        
      }
      &_drop{
        height: 24px;
        border-left: 1px solid #ededed; 
        // float: right; 
        // display: inline-block;
        // overflow: hidden;
        /deep/.ivu-icon-md-arrow-dropdown{
          height: 16px;
          margin-top: 32px;
        }
      }
      &_dropMess{
        font-size: 16px;
        color: #1a202e;
        white-space: nowrap;
        overflow: hidden;
        display: inline-flex;
        max-width: 108px;
        
      }
      &_dropdownMenu{
        // left: 0!important;
        // width: 470px!important; 
        /deep/.ivu-dropdown-item{
          text-align: left; 
          white-space: break-spaces; 
        } 
        
      }
      &_Menu{
        //padding-left: 50px;
        width: 158px;
        box-sizing: border-box;
        cursor: pointer;
      }
      &_code{
        min-width: 240px;
        height: 80px;
        background: #ffffff;
        box-shadow: 0px 0px 20px 0px rgba(202,205,208,0.1);
        display: inline-block;
        vertical-align: bottom;
        line-height: 80px; 
        margin-right: 2px;
        &_span{
           color:#2298FF; 
           cursor: pointer;
        }
        &_span.disabled{
           color:#ccc; 
           cursor: no-drop;
        }
      }
      &_inputCode{
        width: 164px;
        height: 40px;
        padding-left: 20px;
        border: none;
        
      }
     &_loginButton{
       width: 188px;
       height: 80px;
       background: #2298ff;
       box-shadow: 0px 0px 20px 0px rgba(202, 205, 208, 0.1);
       color: white;
       display: inline-block;
       vertical-align: bottom;
       line-height: 80px;
       font-size: 19px;
       cursor: pointer;
       position: relative;
     }
    }
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
      -webkit-appearance: none;
  }
  /deep/.ivu-select-dropdown{
    margin-top: 0;
  }
  /deep/.ivu-dropdown-rel{
          margin-left: 50px;
  }
  .login_from_inputPhones{
    /deep/.ivu-input{
      border: none;
      box-shadow: none;
      height: 78px;
      box-sizing: border-box;
      padding-left: 20px;
      width: 300px;
    }
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  .demo-spin-icon-loadingMess{
    position: absolute;
    color: white;
    font-size: 12px;
     top: 28px;
    left: 75px;
  }
  /deep/.ivu-dropdown-item{
    padding: 7px;
  }
</style>
